import React, {Component, useState} from 'react';
import {connect} from 'react-redux';
import {StyleSheet, View, Text, StatusBar, Platform} from 'react-native';
import {
    Toast,
} from 'antd-mobile-rn';
import Button from '$/components/Button'
import {login} from '$/actions';
import Icon from '$/components/Icon';
import Circle from './Circle';
import NavUtils from '$/utils/NavUtils';

let isAndroid = Platform.OS === 'android';


function Login(props) {
    const {
        onLogin
    } = props;

    const [agree, setAgree] = useState(false);

    function phoneLogin(bool) {
        if(agree){
            NavUtils.go( bool ? 'TabBar' :'LoginPhone')
        }else{
            Toast.info('请先勾选同意《服务条款》《隐私政策》')
        }
    }
    const {
        app:{
            loginTheme:{
                background,
                logoColor
            }
        }
    } = props;
        return (
            <View style={{
                backgroundColor: background,
                height: '100%',
                justifyContent:'space-between'
            }}>
                <StatusBar hidden={false} translucent={true} backgroundColor={'transparent'}/>
                <View style={[styles.logoBox]}>
                    <View style={{
                        justifyContent: 'center',
                        alignItems: 'center',
                        width: '100%',
                        height: '100%',
                        position: 'absolute',
                        top:0,
                        left:0
                    }}>
                        <Circle time={8000}/>
                        <Circle time={8000} delay={1500}/>
                        <View style={
                            [styles.logo,{
                                backgroundColor: logoColor,
                            }]}>
                            <Text style={styles.logoText}>麦兜</Text>
                        </View>
                    </View>
                </View>
                <View style={[styles.formBox]}>
                    <Button opacity={0.8}  style={[styles.submit]} onPress={()=>phoneLogin()}>
                        <Text style={{color: background, fontSize: 16}}>手机号登录</Text>
                    </Button>
                    <Button opacity={0.6} style={[
                        styles.submit,
                        {
                            backgroundColor: 'transparent',
                            borderColor: 'rgba(255,255,255,0.8)',
                            borderWidth: 1
                        }]} onPress={()=> phoneLogin(true)}>
                        <Text style={{color: '#fff', fontSize: 16}}>立即体验</Text>
                    </Button>
                </View>
                <View style={styles.clause}>
                    <Text onPress={() => setAgree(!agree)}>
                        {
                            agree ?  <Icon  style={[styles.text,{fontSize: 18}]}>&#xe66c;</Icon> :
                                <Icon  style={[styles.text,{fontSize: 18}]}>&#xe651;</Icon>
                        }
                    </Text>
                    <Text style={{paddingBottom: 4,color: 'rgba(255,255,255,0.8)'}}>
                        <Text style={[styles.text,]} onPress={() => setAgree(!agree)}> 同意</Text>《服务条款》<Text style={[styles.text]}>和</Text>《隐私政策》
                    </Text>
                </View>
            </View>
        );
}


export default connect(({app}) => ({app}), dispatch => ({
    onLogin: () => dispatch(login(null))
}))(Login);


let boxCenter = {
    justifyContent:'center',
    alignItems:'center',
}

const styles = StyleSheet.create({
    clause:{
        height: 70,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection:'row',
        paddingBottom: isAndroid ?  0 : 40
    },
    text:{
        color:'rgba(255,255,255,0.5)'
    },
    logoBox:{
        position:'relative',
        height:'60%',
    },
    logo:{
        width: 70,
        height: 70,
        borderRadius: 100,
        ...boxCenter,
        zIndex: 99999
    },
    logoText:{
        color: '#fff',
        fontSize: 23,
        fontWeight: 'bold',

    },
    formBox: {
        height: 160,
        justifyContent: 'flex-end',
        flexDirection: 'column',
    },

    formItemProxy:{
        height: 40,
        width: 60,
        lineHeight: 36,
        borderRightWidth: 1,
        borderRightColor: '#eee',
        fontSize: 14,
        textAlign:'center'
    },
    formGetCode:{
        minWidth: 70,
        height: 30,
        marginRight: 5,
        borderRadius: 20,
        paddingLeft: 10,
        paddingRight: 10,
        ...boxCenter
    },
    submit:{
        borderRadius: 520,
        marginLeft: '13%',
        marginRight: '13%',
        backgroundColor: '#fff',
        marginTop:23,
        ...boxCenter
    },
    loginFooter:{
        height: 100,
        flexDirection:'row',
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        marginLeft: '16%',
        marginRight: '16%',
    },
    iconBox:{
        width: 32,
        height: 32,
        borderRadius: 50,
        borderWidth: 1,
        justifyContent: 'center',
        alignItems: 'center',
        borderColor: 'rgba(255,255,255, 0.4)',
    },
    icon:{
        color: 'rgba(255,255,255, 0.8)',
        fontSize: 20,
        textAlign: 'center'
    },
})
